<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>柱状图</title>
    <link rel="stylesheet" href="../../../lib/layui/css/layui.css">
    <link rel="stylesheet" href="../../../css/oksub.css">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body>
<div class="layui-row">
    <form class="layui-form" style="margin-top:15px;margin-bottom: 25px" action="">
        <div class="layui-inline">
            <label class="layui-form-label">时间</label>
            <div class="layui-input-block">
                <select name="dateType" id="dateType" lay-verify="dateType">
                    <option value='1'>最近一个月</option>
                    <option value='2'>最近三个月</option>
                    <option value='3'>最近半年</option>
                    <option value='4'>最近一年</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">部门</label>
            <div class="layui-input-block">
                <div id="selDepartment" style="width: 205px"></div>
            </div>
        </div>
        <div class="layui-inline">
            <div class="layui-inline" style="margin-right: 8px">
                <button class="layui-btn" id="search">
                    <i class="layui-icon layui-icon-search" style="font-size: 14px">搜索</i>
                </button>
            </div>
            <div id="selectMore" style="margin-left:0px;"
                 class="layui-btn layui-btn-normal">
                更多
            </div>
        </div>
    </form>
</div>

<div id="main" style="width: 100%;height:400px;margin-top: 50px;"></div>

<script src="../../../lib/echarts/echarts.min.js"></script>
<script src="../../../lib/layui/layui.js"></script>
<script src="../../../js/jquery.min.js"></script>
<script src="../../../js/application.js"></script>
<script src="../../../js/selectMore.js"></script>
<script type="text/javascript">
    layui.use(['layedit', 'upload', 'element', 'form', 'okLayer'], function () {
        let form = layui.form;
        let $ = layui.jquery;
        let okLayer = layui.okLayer;

        //部门多选下拉框
        var selDepartment = xmSelect.render({
            el: '#selDepartment',
            toolbar: {show: true},
            data: []
        });

        //获取派出所信息
        $.ajax({
            url: mainUri + "/dep/getDepartment",
            type: 'post',
            data: {'deepth': 3}
        }).done(function (datas) {
            var list = datas['data'];
            var select = [];
            if (list.length > 0) {
                for (var i = 0; i < list.length; i++) {
                    select.push({value: list[i]['departmentId'], name: list[i]['departmentName']})
                }
            }
            selDepartment.update({
                data: select,
                autoRow: true,
            });
        }).fail(function () {
            layer.msg("服务器错误");
        });

        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        //获取案件数量信息
        $.ajax({
            url: mainUri + "/caseCount/getCaseCountEnd",
            type: 'post',
            data: {
                'dateType': 1
            },
            success: function (datas) {
                var list = datas['data'];
                var departmentName = [];
                var caseAllCount = [];
                var caseEndCount = [];
                var caseNoEndCount = [];
                for (var i = 0; i < list.length; i++) {
                    departmentName.push(list[i]['departmentName']);
                    caseAllCount.push(list[i]['caseAllCount']);
                    caseEndCount.push(list[i]['caseEndCount']);
                    caseNoEndCount.push(list[i]['caseNoEndCount']);
                }
                chart(departmentName, caseAllCount, caseEndCount, caseNoEndCount)
            },
            error: function () {
                alert("服务器错误");
            }
        })

        //点击搜索按钮
        $("#search").on('click', search);

        function search() {
            var dateType = $("#dateType").val();
            var selectArr = selDepartment.getValue('value');
            $.ajax({
                url: mainUri + "/caseCount/getCaseCountEnd",
                type: 'post',
                data: {
                    'dateType': dateType
                },
                success: function (datas) {
                    var list = datas['data'];
                    var departmentName = [];
                    var caseAllCount = [];
                    var caseEndCount = [];
                    var caseNoEndCount = [];
                    if (selectArr.length == 0) {
                        for (var i = 0; i < list.length; i++) {
                            departmentName.push(list[i]['departmentName']);
                            caseAllCount.push(list[i]['caseAllCount']);
                            caseEndCount.push(list[i]['caseEndCount']);
                            caseNoEndCount.push(list[i]['caseNoEndCount']);
                        }
                    } else {
                        for (var i = 0; i < list.length; i++) {
                            for (var j = 0; j < selectArr.length; j++) {
                                if (selectArr[j] == list[i]['departmentId']) {
                                    departmentName.push(list[i]['departmentName']);
                                    caseAllCount.push(list[i]['caseAllCount']);
                                    caseEndCount.push(list[i]['caseEndCount']);
                                    caseNoEndCount.push(list[i]['caseNoEndCount']);
                                }
                            }
                        }
                    }
                    chart(departmentName, caseAllCount, caseEndCount, caseNoEndCount)
                },
                error: function () {
                    alert("服务器错误");
                }
            })
            return false;
        }

        //使用时间条件查询
        $("#selectMore").on('click', selectMore);

        function selectMore() {
            //清空主页面的部门
            selDepartment.setValue([]);
            okLayer.open("查询条件", "selectForm.html", "35%", "60%", function (layero) {
                let iframeWin = window[layero.find("iframe")[0]["name"]];
            }, function () {
                var selDepartment = window.document.selDepartment;
                var startTime = window.document.startTime;
                var endTime = window.document.endTime;
                var newStartDate = startTime.replace(/-/g, "/");//时间格式转换
                var newEndDate = endTime.replace(/-/g, "/");
                window.document.selDepartment = "";
                window.document.startTime = "";
                window.document.endTime = "";
                var isChange=window.document.isChange;
                window.document.isChange=0;
                if(isChange!=1){
                    return;
                }
                $.ajax({
                    url: mainUri + "/caseCount/getCaseCountEnd",
                    type: 'post',
                    data: {
                        'startTime': newStartDate,
                        'endTime': newEndDate
                    },
                    success: function (datas) {
                        var list = datas['data'];
                        var departmentName = [];
                        var caseAllCount = [];
                        var caseEndCount = [];
                        var caseNoEndCount = [];
                        if (selDepartment.length == 0) {
                            for (var i = 0; i < list.length; i++) {
                                departmentName.push(list[i]['departmentName']);
                                caseAllCount.push(list[i]['caseAllCount']);
                                caseEndCount.push(list[i]['caseEndCount']);
                                caseNoEndCount.push(list[i]['caseNoEndCount']);
                            }
                        } else {
                            for (var i = 0; i < list.length; i++) {
                                for (var j = 0; j < selDepartment.length; j++) {
                                    if (selDepartment[j] == list[i]['departmentId']) {
                                        departmentName.push(list[i]['departmentName']);
                                        caseAllCount.push(list[i]['caseAllCount']);
                                        caseEndCount.push(list[i]['caseEndCount']);
                                        caseNoEndCount.push(list[i]['caseNoEndCount']);
                                    }
                                }
                            }
                        }
                        chart(departmentName, caseAllCount, caseEndCount, caseNoEndCount)
                    },
                    error: function () {
                        alert("服务器错误");
                    }
                })
                return false;
            })
        }

        //渲染柱状图
        function chart(departmentName, caseAllCount, caseEndCount, caseNoEndCount) {
            myChart.setOption({
                title: {
                    //text: '各派出所所结案件数量'
                },
                tooltip: {},
                legend: {
                    data: ['已办结警情', '未办结警情', '警情总量']
                },
                xAxis: {
                    name: '各派出所',
                    data: departmentName
                },
                yAxis: {
                    type: 'value',
                    name: '警情数量',
                    min: 0,
                    interval: 5,
                    minInterval: 1,
                },
                series: [{
                    name: '已办结警情',
                    type: 'bar',
                    data: caseEndCount,
                    itemStyle: {
                        normal: {
                            color:'#61a0a8',
                            label: {
                                show: true, //开启显示
                                position: 'top', //在上方显示
                                textStyle: { //数值样式
                                    color: 'black',
                                    fontSize: 16
                                }
                            }
                        }
                    },

                }, {
                    name: '未办结警情',
                    type: 'bar',
                    data: caseNoEndCount,
                    itemStyle: {
                        normal: {
                            color:'#c23531',
                            label: {
                                show: true, //开启显示
                                position: 'top', //在上方显示
                                textStyle: { //数值样式
                                    color: 'black',
                                    fontSize: 16
                                }
                            }
                        }
                    },

                },{
                    name: '警情总量',
                    type: 'bar',
                    data: caseAllCount,
                    itemStyle: {
                        normal: {
                            color:'#2f4554',
                            label: {
                                show: true, //开启显示
                                position: 'top', //在上方显示
                                textStyle: { //数值样式
                                    color: 'black',
                                    fontSize: 16
                                }
                            }
                        }
                    },
                }]

            });
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        }
    })
</script>
</body>
</html>
